<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>货位信息</title>
    <link rel="stylesheet" href="../../css/cangKuGuanLi/HuoWeiXinXi.css">
    <link rel="stylesheet" href="../../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/cangKu/iconfont.css">
    <script src="../../js/jquery-3.1.1.js"></script>
    <script src="../../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../js/allData.js"></script>


</head>



<body>
   
    <div class="container">
        <!-- 第一行文字 -->
        <div class="header">
            <h4>货位信息</h4>
            <button id="mybtn" type="button"  class="btn"  data-toggle="modal" data-target="#myModal">添加区域</button>
        </div>
        <table class="table">
         <thead id="thead">
          <tr>
            <th>区域名称</th>
            <th>货位数</th>
            <th>操作</th>
          </tr>
         </thead>
         <tbody id="tbody">
           <tr>
             <td>A区</td>
             <td>98</td>
             <td>
              <button  class="btn_xiangxia" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                <span class="iconfont icon-xiangxia" ></span></button>
             <button class="btn_tianjia"><span class="iconfont icon-tianjia"></span></button>
                <button class="btn_shuxie"><span class="iconfont icon-shuxie"></span></button>
                <button class="btn_shanchu" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
                  <span class="iconfont icon-shanchu"></span></button>    
             </td>
          
         </tbody>
        </table>
<!-- 
                    <span>A-104</span>
                    <span>60</span>
                    <button class="btn_shuxie"><span class="iconfont icon-shuxie"></span></button>
                    <button class="btn_shanchu"><span class="iconfont icon-shanchu"></span></button>
                  
         -->



       <!-- Button trigger modal -->
  <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">新增区域</h4>
        </div>
        <div class="modal-body">
          <p> <label for="">区域:</label>
            <input type="text" class="name" onfocus="this.placeholder=''"
                onblur="this.placeholder='请输入区域名称'">
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>您确定要删除吗该条数据吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="del()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 提示框 -->

<div class="tishikuang">
    <i class="glyphicon glyphicon-ok"></i>
    删除成功
</div>

        <script>
            let fenyeList = goodsMessageList;
            //该函数是 渲染table
            //1.获取节点      
            //data 依据数据去渲染html结构

            function showTable(data) {
                // let mytbody = document.getElementById('mytbody')
                //2.获取到节点之后，添加html结构    innerHTML
                $('#tbody').html('');
                $.each(data, (index, item) => {
                    $('#tbody').append(`
                  <tr >
                  <td>${item.area}</td>
                  <td>${item.num}</td>
                  <td>
                    <button class="btn_xiangxia" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><span class="iconfont icon-xiangxia"></span></button>
                    <button class="btn_tianjia"><span class="iconfont icon-tianjia"></span></button>
                    <button class="btn_shuxie"><span class="iconfont icon-shuxie"></span></button>
                   <button class="btn_shanchu del" data-id = '${item.area}' data-item = '${JSON.stringify(item)}'>
                    <span class="iconfont icon-shanchu"></span></button>
                </td>
                </tr>  
                `)
                });


            }
            showTable(goodsMessageList)

            function fenye(data, yema) {
                let qishiye = (yema - 1) * 8;
                let xuanranArr = data.slice(qishiye, qishiye + 8);
                showTable(xuanranArr);

                thePage = yema;

                let num = $('.pageItem').text();
                // console.log(num.length);
                for (let i = 0; i < num.length; i++) {
                    $('.pageItem').eq(i).css({
                        backgroundColor: '',
                        color: '#969494'
                    })
                }
                $('.pageItem').eq(yema - 1).css({
                    backgroundColor: '#6554C0',
                    color: '#fff'
                })
            }

           // 根据页码渲染分页按钮
           function xuanranPage(data) {
                maxPage = Math.ceil(data.length / 8);
                $('#pageBox').html('')
                for (let i = 1; i <= maxPage; i++) {
                    $('#pageBox').append(`
                    <div class='pageItem'>${i}</div>
                `)
                }
            }
            xuanranPage(goodsMessageList)
            fenye(goodsMessageList, 1)


         

      // 删除
      let num = []
        $('#tbody').on('click', '.del', function () {
            var data_item = JSON.parse($(this).attr('data-item'));
            var data_id = $(this).attr('data-id');
            $('#myModal').modal('toggle')
            num.push(data_id)
        })

        function del() {
            let time
            for (let i = 0; i < goodsMessageList.length; i++) {
                if (goodsMessageList[i].area == num[0]) {
                  goodsMessageList.splice(i, 1);
                    num = [];
                    time = setInterval(() => {
                        $('.tishikuang').css({
                            position: 'absolute',
                            top: (size[0] - 100) / 2 + 'px',
                            left: (size[1] - 300) / 2 + 'px',
                            display: 'block'
                        })
                    }, 500);
                    break;
                }
            }
            $('#myModal').modal('hide')
            xuanranPage(goodsMessageList);
            fenye(goodsMessageList, thePage);
            setTimeout(() => {
                clearInterval(
                    time
                )
                $('.tishikuang').css({
                    display: 'none'
                })
            }, 1500);
        }   console.log(goodsMessageList);

if (goodsMessageList.length == 0) {
    fenyeList = goodsMessageList
    show(1)
}

        // 重置
        $('.chongzhi').click(function () {
            fenyeList = goodsMessageList
            show(1)
        })

        show(1)

        function show(num) {
            xuanranPage(fenyeList);
            fenye(fenyeList, 1)
        }
 // 提示框
 let size = []

function tishi() {
    let tishikuang = document.getElementsByClassName('tishikuang');
    let top = document.body.clientHeight
    let left = document.body.clientWidth
    size.push(top, left);
}
tishi()
// console.log(size);
$('.tishikuang').css({
    position: 'absolute',
    top: (size[0] - 100) / 2 + 'px',
    left: (size[1] - 100) / 2 + 'px',
    display: 'none'
})



        </script>
</body>

</html>